import PropTypes from 'prop-types'
import React, { memo, useState, useCallback } from 'react'
import SectionHeader from '@/components/section-header'
import SectionRooms from '@/components/section-rooms'
import SectionTabs from '@/components/section-tabs'
import { SectionV2Wrapper } from './style'
import SectionFooter from '@/components/section-footer'

const HomeSectionV2 = memo((props) => {
    const { infoData } = props

    // 数据转换
    // 获取默认城市
    const initialName = Object.keys(infoData?.dest_list)[0]
    const [name, setName] = useState(initialName)
    // 获取tab标签
    const tabNames = infoData?.dest_address?.map(item => item.name)

    // tab切换
    const tabClickHandle = useCallback(function (name, index) {
        // 更新当前选中的城市
        setName(name)
    }, [])

    return (
        <SectionV2Wrapper>
            {/* 折扣数据 */}
            <div className="discount">
                <SectionHeader title={infoData.title} subtitle={infoData.subtitle} />
                <SectionTabs tabNames={tabNames} tabClick={tabClickHandle} />
                <SectionRooms roomList={infoData?.dest_list?.[name]} itemWidth="33.333333%" />
                <SectionFooter name={name} />
            </div>
        </SectionV2Wrapper>
    )
})

HomeSectionV2.propTypes = {
    infoData: PropTypes.object,
}

export default HomeSectionV2